<template>
    <view class="pages" :class="GlobalThemes.commonBackGroundClass">
        <view class="search-top-box" id="navbar">
            <u-navbar
                back-icon-color="#ffffff"
                :is-back="true"
                :custom-back="GoBack"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
            </u-navbar>
        </view>
        <view class="list" v-if="info">
            <view class="list-item">
                <view class="list-item-top">
                    <view class="list-item-top-title">
                        类型：{{ info.type || '-' }}
                    </view>
                    <view class="list-item-top-box">
                        <view class="list-item-top-box-img" v-if="info.imgs.length > 0">
                            <u-image
                                v-for="(item, index) in info.imgs"
                                :key="index"
                                width="240"
                                height="240"
                                :src="apiImageUrl + item"
                            ></u-image>
                        </view>
                        <view class="list-item-top-box-text">
                            <text>详情：{{ info.content || '-' }}</text>
                        </view>
                    </view>
                </view>
                <view class="list-item-bottom">
                    <view class="list-item-bottom-title">回复：</view>
                    <view class="list-item-bottom-box-text">
                        <text>{{ info.replay || '-' }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const MyApp = getApp();
const globalData = MyApp.globalData;
export default {
    data() {
        return {
            tabIndex: 0,
            typelist: globalData.typelist,
            info: null,
            apiImageUrl: this.$config.apiImageUrl
        };
    },
    computed: {
        i18n() {
            return globalData.$t;
        }
    },
    onLoad(options) {
        MyApp.checkLogin(true);
        if (options && options.hasOwnProperty('id')) {
            this.getMsgDetail(options.id);
        }
    },
    onReady() {
        this.tabIndex = uni.getStorageSync('tabIndex') || 0;
    },
    methods: {
        getMsgDetail(id) {
            let _this = this;
            _this.$http
                .post('/user/user/getFeedbackDetail', {
                    id: id
                })
                .then(res => {
                    _this.info = res.data;
                });
        }
    }
};
</script>

<style lang="scss">
.pages {
    padding: 20upx;
    color: #282C35;
    
    .list {
        height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .list-item {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .list-item-top {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;

                .list-item-top-title {
                    flex: 1;
                    padding: 20upx 0;
                    font-size: 32rpx;
                    font-weight: 700;
                }

                .list-item-top-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    
                    .list-item-top-box-img{
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                    }

                    .list-item-top-box-text {
                        flex: 1;
                        padding: 20upx 0 0 0;
                        
                        & > text {
                            font-size: 31upx;
                        }
                    }
                }
            }

            .list-item-bottom {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;

                .list-item-bottom-title {
                    flex: 1;
                    padding: 20upx 0;
                    font-size: 32rpx;
                    font-weight: 700;
                }
                
                .list-item-bottom-box-text text{
                    font-size: 31upx;
                }

                & > view {
                    flex: 1;
                }
            }
        }
    }
}
</style>
